<template>
	<div class="main">
		<div class="title">
			Statistic By Host
		</div>

		<div class="content">
			<div class="left">
				<div :class="['item', qury.virusSpecies === n.virus_species ? 'active': '']" v-for="(n, idx) in species" :key="idx" @click="speciesClick(n)">
					{{n.virus_species}}
				</div>
			</div>
			<div class="right">
				<div v-loading="loading" id="chartId" style="width: 100%;height: 400px" />
			</div>
		</div>
	</div>
</template>

<script>
  import {getVirusStatistic} from "@/api/statistic";
  import {getAllSpecies, getHostStatistic} from "../../api/statistic";

  export default {
    name: "host",
    data() {
      return {
        species: [],
				list: [],
				chart: null,
				qury: {
          virusSpecies: 'All the virus'
				},
        loading: false,
			}
    },
    mounted() {

      this.initChart()
      this.loadSpeciesData()
      this.getVirusTotalBySpecies()
    },
    methods: {
      initChart() {
        this.chart = this.$echarts.init(document.getElementById('chartId'))
      },
      async loadSpeciesData() {
        const res = await getAllSpecies()
				if (res) {
          res.data.unshift({virus_species: 'All the virus', isAll: true})
				}
				this.species = res.data
			},

      speciesClick(n) {
        this.qury.virusSpecies = n.virus_species
        this.getVirusTotalBySpecies(this.qury.virusSpecies === 'All the virus' ? null : n.virus_species)
			},
      async getVirusTotalBySpecies(specie) {
        this.loading = true
        const res = await getHostStatistic({virusSpecies: specie})
				if(res) {
				  this.setOptions(res.data)
				}

        this.loading = false
      },
      setOptions(data) {

        let xArr = new Set();
        let yArr = []

        data.map( n => {
          xArr.add(n.host == null ? 'Null' : n.host)
          yArr.push(0)
				})

				xArr = Array.from(xArr)


        data.map(n => {
          let idx = xArr.indexOf(n.host)

					if (n.host == null) {
            yArr[0] = n.num
					}else if (idx > -1) {
            yArr[idx] = n.num
          }
        })

        let zoomShow = xArr.length > 5;

        let option = {
          grid:{
            bottom:"30%" //
          },
          dataZoom: {
            show: zoomShow,
            type: 'slider',
            realtime: true,
            startValue: 0,
            endValue: 10,
            xAxisIndex: [0],
            bottom: '10',
            left: '30',
            height: 30,
            borderColor: 'rgba(0,0,0,0)',

          },
          title: {
            text: 'Numbers of Virus species in ' + this.qury.virusSpecies,
            left: 'center'
          },
          xAxis: {
            name: 'Host',
            type: 'category',
            data: xArr,
            axisLabel : {//坐标轴刻度标签的相关设置。
              offset: -20,
              interval: 0,
              rotate: 30,  //设置倾斜度
              formatter : function(params){
                var newParamsName = "";// 最终拼接成的字符串
                var paramsNameNumber = params.length;// 实际标签的个数
                var provideNumber = 20;// 每行能显示的字的个数
                var rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 换行的话，需要显示几行，向上取整
								rowNumber = rowNumber > 2 ? 2 : rowNumber;
                /**
                 * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
                 */
                // 条件等同于rowNumber>1
                if (paramsNameNumber > provideNumber) {
                  /** 循环每一行,p表示行 */
                  for (var p = 0; p < rowNumber; p++) {
                    var tempStr = "";// 表示每一次截取的字符串
                    var start = p * provideNumber;// 开始截取的位置
                    var end = start + provideNumber;// 结束截取的位置
                    // 此处特殊处理最后一行的索引值
                    if (p == rowNumber - 1) {
                      // 最后一次不换行
                      // tempStr = params.substring(start, paramsNameNumber);
											if (paramsNameNumber - start > 3) {
                        tempStr = params.substring(start, start + provideNumber - 3) + '...';
                      }else {
                        tempStr = params.substring(start, paramsNameNumber);
											}
                    } else {
                      // 每一次拼接字符串并换行
                      tempStr = params.substring(start, end) + "\n";
                    }
                    newParamsName += tempStr;// 最终拼成的字符串
                  }

                } else {
                  // 将旧标签的值赋给新标签
                  newParamsName = params;
                }
                //将最终的字符串返回
                return newParamsName
              }
            }
          },
          color: ['#11427d'],
          yAxis: {
            type: 'value',
            name: 'Numbers',
            axisLine: {
              show: false, // 不显示坐标轴线
            },
            axisLabel: {
              show: true, // 不显示坐标轴上的文字
            },

          },
          //头部显示
          label: {
            show: true,
            position: 'top',
            color: '#11427d',
          },
          series: [
            {
              type: 'bar',
              data: yArr,
              barWidth: '30',

              label: {
                normal: {
                  show: true,
                  lineHeight: 10,
                  formatter: '{c}',
                  position: 'top',
                  textStyle: {
                    color: '#11427d',
                    fontSize: 10,
                  },
                },
              },

            }
          ]
        };
        this.chart.setOption(option)
      },
    }
  }
</script>

<style lang="stylus" scoped>

	.main {
		width 1170px
		margin-top 20px
		padding-top 10px
		font-family: Times New Roman;

		.title {
			font-size 28px
			text-align left
			margin-bottom 20px
			padding 15px 0
			color #11427D
			font-weight 800
		}

		.content {
			display flex
			flex 1
			min-height 250px
			height: calc(100vh - 320px);

			.left {
				width: 360px;
				transition: padding-top .3s;
				overflow hidden

				.item {
					padding 15px
					margin-right 10px
					color #0064bc
					font-size 15px
					cursor pointer
				}

				.active, .item:hover {
					background-color #f9f9f9
					color #9c1919
					text-decoration underline
				}
			}

			.left:hover {
				overflow-y: auto;
			}

			/* 滚动条整体部分 */
			.left::-webkit-scrollbar {
				width: 10px;
				height: 10px;
			}

			.right /deep/ {
				flex 1
				padding 0 30px
				box-sizing: border-box;

				//设置图标颜色
				.el-loading-spinner .path {
					stroke: #11427D;
				}
			}
		}
	}
</style>
